<template>
  <div class="publish-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
          <el-breadcrumb-item>修改文章</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- /面包屑路径导航 -->
      </div>
      <el-form :model="article" :rules="formRules" label-width="80px" ref="publish-form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" class="input_textarea" v-model="article.content"></el-input>
          <el-tiptap v-model="article.content" height="350px" placeholder="请输入文章内容"></el-tiptap>
        </el-form-item>
        <el-form-item class="item_lable" label="发布时间">
          {{ article.pubulish_time }}
        </el-form-item>
        <el-form-item label="文章作者">
          {{ article.username }}
        </el-form-item>
        <el-form-item label="文章类型">
          <el-select v-model="category_id" placeholder="请选择">
            <el-option :label="article.category ? article.category : '全部'" :value="''"></el-option>
            <el-option :label="category.category" :value="category.id" v-for="(category) in categoryList"
              :key="category.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章状态">
          <el-select v-model="status_id" placeholder="请选择">
            <el-option :label="article.state ? article.state : '全部'" :value="''"></el-option>
            <el-option :label="article.state ? article.state : '全部'" :value="status.status" v-for="(status, index) in articleStatus"
              :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateArticle()">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
  
<script>
import { getCategorys, queryArticlesItem } from '@/api/essay'
// import UploadCover from './components/upload-cover'
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Image,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  CodeBlock,
  TextColor
} from 'element-tiptap'
import 'element-tiptap/lib/index.css'
import axios from "axios"

export default {
  name: 'PublishIndex',
  components: {
    'el-tiptap': ElementTiptap,
    // UploadCover
  },
  props: {},
  data() {
    return {
      categoryList: [], // 文章频道列表
      article: {
        title: '', // 文章标题
        content: '', // 文章内容
        pubulish_time: '',
        username: '',
        category: '',
        state: ''
      },
      article_id: 0,
      article_origin: {
        category_id: 1,
        state_id: 1
      },
      category_id: [],
      status_id: [],
      articleStatus: [
        { status: 1, text: '待审核', type: '' }, // 1
        { status: 2, text: '审核通过', type: 'success' }, // 2
        { status: 3, text: '审核失败', type: 'warning' }
      ],
      formRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        content: [
          // { required: true, message: '请输入文章内容', trigger: 'change' }
          {
            validator(rule, value, callback) {
              console.log('content validator')
              if (value === '<p></p>') {
                // 验证失败
                callback(new Error('请输入文章内容'))
              } else {
                // 验证通过
                callback()
              }
            }
          },
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '请选择文章频道' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.loadChannels()
    // 如果路由路径参数中有 id，则请求展示文章内容
    if (this.$route.query.id) {
      console.log(this.$route.query.id, "this.$route.query.id");
      this.article_id = this.$route.query.id;
    }
    queryArticlesItem(this.article_id).then((res) => {
      console.log(res, "queryArticlesItem res");
      this.article = res[0];
    })
    console.log(this.article, "this.article ");
    // queryOriginArticlesItem.then((res) => {
    //   this.article_origin = res[0]
    // })
  },
  mounted() { },
  methods: {
    loadChannels() {
      getCategorys().then(res => {
        console.log(res, "getCategorys res");
        this.categoryList = res || [];
      })
    },

    // 修改文章：加载文章内容
    updateArticle() {
      console.log('updateArticle')
      let params = {
        title: this.article.title,
        content: this.article.content,
        category_id: this.category_id,
        state_id: this.status_id
      }
      console.log(params, "params");
      console.log(this.article_id);
      axios.put(`http://127.0.0.1/articles_corr/${this.article_id}`, params).then(res => {
        console.log(res, "http://127.0.0.1/articles_corr");
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
        this.editDialogVisible = false
      }).catch(err => {
        console.log("获取数据失败" + err);
        this.$message({
          type: 'success',
          message: '修改失败!'
        });
      })
    },
  }
}
</script>
  
<style scoped lang="less">
el-form-item {
  margin-right: 20px;
}
</style>
  